<template>
  <basic-container>
    <div v-if="!isCheck">
      <div class="pdf-verify-title">
        <h1>文件防伪校验</h1>
      </div>
      <div class="pdf-verify">
        <div class="pdf-verify-left">
          <h1>验证电子文件有效性</h1>
          <p>若需查看电子文件数字签名详细信息，请通过其他阅读器进行校验。</p>
          <el-upload
              class="avatar-uploader"
              action="/api/uploadFile"
              :on-success="handleFileSuccess"
              :before-upload="beforeUpload"
              name="myFile"
              :show-file-list="false">
            <el-button class="upload-btn" icon="UploadFilled">上传pdf文件校验 </el-button>
          </el-upload>

        </div>
        <div class="pdf-verify-right">
          <img src="../../img/verify/pdf-verify.svg">
        </div>
      </div>
    </div>
    <div v-if="isCheck">
      <div class="resultTitle">文件验证完成</div>
      <div :class="isChange?'contractInfo noModify_no' : 'contractInfo noModify'">
        <div class="contractInfoTitle">
          <div class="titleLine"></div>
          <div class="contractInfoTitleText">文件合同信息</div>
        </div>
        <!-- 合同信息 -->
        <div class="contractInfoContent">
          <div class="contractInfoContentItem">
            <div class="contractInfoContentItemLabel">文件名称：</div>
            <div class="contractInfoContentItemValue">{{fileName}}</div>
          </div>
          <div class="contractInfoContentItem">
            <div class="contractInfoContentItemLabel">文件大小：</div>
            <div class="contractInfoContentItemValue">{{signTable.pdfSize}}</div>
          </div>
        </div>
      </div>
      <!-- 校验结果信息 -->
      <div class="checkContent">
        <div class="checkContentTitle">
          <div class="titleLine"></div>
          <div class="checkContentTitleDescription">文件中共包含{{signNum}}个电子签名</div>
        </div>
        <div class="checkContentItemBox">
          <!--        下面这个checkContentItem里面写for-->
          <div class="checkContentItem" v-for="item in signTable.signatureDetails">
            <div class="checkContentItemLeft">
              <div class="checkContentItemLeftTitle">签名信息</div>
              <div class="checkContentItemLeftDescriptionItem">
                <div class="checkContentItemLeftDescriptionItemLabel">签名方：</div>
                <div class="checkContentItemLeftDescriptionItemValue">{{item.certName.split("CN=")[1].split(",")[0]}}</div>
              </div>
              <div class="checkContentItemLeftDescriptionItem">
                <div class="checkContentItemLeftDescriptionItemLabel">签署时间：</div>
                <div class="checkContentItemLeftDescriptionItemValue">
                  {{dateFormat("YYYY-mm-dd HH:MM:SS",new Date(item.signTime))}}
                </div>
              </div>
              <div class="checkContentItemLeftDescriptionItem">
                <div class="checkContentItemLeftDescriptionItemLabel">签署时间来源：</div>
                <div class="checkContentItemLeftDescriptionItemValue">本地时间</div>
              </div>
              <div class="checkContentItemLeftDescriptionItem">
                <div class="checkContentItemLeftDescriptionItemLabel">保护区Hash(Base64)：</div>
                <div class="checkContentItemLeftDescriptionItemValue">{{item.fileDigest}}</div>
              </div>

              <div class="checkContentItemLeftTitle">证书信息</div>
              <div class="checkContentItemLeftDescriptionItem">
                <div class="checkContentItemLeftDescriptionItemLabel">序列号：</div>
                <div class="checkContentItemLeftDescriptionItemValue">{{item.serialNumber}}</div>
              </div>
              <div class="checkContentItemLeftDescriptionItem">
                <div class="checkContentItemLeftDescriptionItemLabel">颁发机构：</div>
                <div class="checkContentItemLeftDescriptionItemValue">{{item.userDnName.split("CN=")[1].split(",")[0]}}</div>
              </div>
              <div class="checkContentItemLeftDescriptionItem">
                <div class="checkContentItemLeftDescriptionItemLabel">有效期：</div>
                <div class="checkContentItemLeftDescriptionItemValue">
                  {{dateFormat("YYYY-mm-dd HH:MM:SS",new Date(item.validStartTime))}} ~ {{dateFormat("YYYY-mm-dd HH:MM:SS",new Date(item.validEndTime))}}
                </div>
              </div>
            </div>
            <div class="checkContentItemRight" v-if="item.validate">
              <div class="checkContentItemRightResult">
                <div class="icon"><el-icon><CircleCheck /></el-icon></div>
                <div class="checkContentItemRightResultDescription">签名有效</div>
              </div>
              <div class="checkContentItemRightResult">
                <div class="icon"><el-icon><CircleCheck /></el-icon></div>
                <div class="checkContentItemRightResultDescription">自签名以来，内容未被修改</div>
              </div>
              <div class="checkContentItemRightSignature">
                <img :src="item.filePath">
              </div>
            </div>
            <div class="checkContentItemRight" v-else>
              <div class="checkContentItemRightResult">
                <div class="icon_no"><el-icon><CircleCheck /></el-icon></div>
                <div class="checkContentItemRightResultDescription">签名无效</div>
              </div>
              <div class="checkContentItemRightResult">
                <div class="icon_no"><el-icon><CircleCheck /></el-icon></div>
                <div class="checkContentItemRightResultDescription">自签名以来，内容已被修改</div>
              </div>
              <div class="checkContentItemRightSignature">
                <img :src="item.filePath">
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="btn-group">
        <el-button class="return-btn" @click="isCheck = false">返回</el-button>
      </div>
    </div>
  </basic-container>
</template>

<script setup>
import {ref,getCurrentInstance} from 'vue';
import {ElMessage} from 'element-plus';
import {getPdfSignDetailApi} from '../../api/sign';
import {dateFormat, diskSize} from '../../utils/util';
const {proxy} = getCurrentInstance();

// 文件名
const fileName = ref("")
/**
 * 上传文件前校验
 */
const beforeUpload = (file) => {
  fileName.value =  file.name
  if(file.type !== "application/pdf"){
    ElMessage.error("请上传PDF格式的文件！")
    return false
  }else if (file.size / 1024 / 1024 > 10) {
    ElMessage.error('上传文件大小不能超过10MB!')
    return false
  }
  return true
}

// 是否上传pdf进行校验
const isCheck = ref(false)
// 上传pdf后返回的url
const pdfUrl = ref('')
// 所包含的pdf数量
const signNum = ref(0)
// 包含的签名信息
const signTable = ref({})
// 全文是否被修改
const isChange = ref(false)
/**
 * 上传成功后开始校验
 * @param res
 * @param file
 */
const handleFileSuccess = (res, file) => {
  pdfUrl.value = res
  getPdfSignDetailApi(pdfUrl.value)
  .then(res=>{
    let data = res.data.result
    data.pdfSize = diskSize(data.pdfSize)
    signNum.value = data.signatureDetails.length
    for (let i=0;i<signNum.value;i++){
      if (data.signatureDetails[i].validate === "false"){
        isChange.value = true
      }
    }
    signTable.value = data
    if(signNum.value === 0){
      ElMessage.error("文件未发现签章，请检查后重新上传")
    }else{
      isCheck.value = true
    }
    }).catch(res=>{
      ElMessage.error(res)
   })
}



</script>

<style scoped>
/deep/ .el-card__body{
  padding: 30px 60px;
  min-height: 71vh;
  background-color: #ffffff;
}
.pdf-verify-title{
  border-bottom: 1px solid #e4e4e4;
}
.pdf-verify-title h1{
  font-size: 28px;
  font-weight: 600;
  color: #202640;
  margin: 16px;
}

.pdf-verify{
  display: flex;
}
.pdf-verify-left{
  margin: 60px 16px;
}
.pdf-verify-left h1{
  font-weight: 400;
}
.upload-btn{
  background-color: #1063f1;
  color: #fff;
  margin-right: 20px;
  border: 1px solid #1063f1;
  margin: auto;
  position: relative;
  width: 190px;
  height: 42px;
  border-radius: 0;
  font-size: 16px;
  font-weight: 400;
  transition: all .3s;
}
.upload-btn:hover{
  transform: translateY(-6px);
  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.25);
}
.pdf-verify-left p{
  font-family: 微软雅黑, Microsoft YaHei, STXihei;
  width: 500px;
  font-size: 18px;
  color: #202640;
  line-height: 36px;
  font-weight: 200;
  margin: 30px 0;
}
.pdf-verify-right{
  margin-top: 60px;
  margin-left: 50px;
}
.pdf-verify-right img{
  width: 500px;
}


/deep/ .el-card__body{
  padding: 30px 60px;
  min-height: 71vh;
  background-color: #ffffff;
}
.resultTitle{
  font-size: 30px;
  font-weight: 600;
  color: #202640;
  line-height: 42px;
  margin: 28px 0;
  padding-bottom: 20px;
  text-align: center;
}

.contractInfo {
  margin: 10px 0;
  padding-bottom: 23px;
  border: 0px solid #e4e4e4;
  border-bottom-width: 1.5px;
}
.noModify {
  background: url('../../img/verify/verify-success.svg') no-repeat left 310px top 0 / 140px;
}

.noModify_no {
  background: url('../../img/verify/verify-failed.svg') no-repeat left 310px top 0 / 140px;
}
.contractInfoTitle {
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  margin: 0 40px 16px;
}
.titleLine {
  width: 4px;
  height: 16px;
  background: #e61717;
  margin-right: 8px;
}
.contractInfoTitleText{
  height: 30px;
  font-size: 14px;
  font-weight: 600;
  color: #202640;
  line-height: 30px;
}
.contractInfoContent {
  margin: 0 40px;
}
.contractInfoContentItem{
  display: flex;
  align-items: center;
}
.contractInfoContentItem .contractInfoContentItemLabel{
  width: 170px;
  font-size: 14px;
  font-weight: 400;
  color: #202640;
  line-height: 30px;
  flex: none;
}
.contractInfoContentItem .contractInfoContentItemValue{
  font-size: 14px;
  color: #333;
}
.checkContent {
  padding: 40px 40px;
}
.checkContentTitle{
  display: flex;
  align-items: center;
}
.checkContentTitleDescription {
  height: 30px;
  font-size: 14px;
  font-weight: 600;
  color: #202640;
  line-height: 30px;
}
.checkContent .checkContentItem:first-child {
  padding-top: 0px;
}
.checkContent .checkContentItem {
  display: flex;
  justify-content: space-between;
  padding-top: 8px;
  padding-bottom: 40px;
  border: 0px solid #e4e4e4;
  border-bottom-width: 1px;
}
/*左侧信息*/
.checkContent .checkContentItem .checkContentItemLeftTitle {
  height: 30px;
  font-size: 14px;
  font-weight: 400;
  color: #a6aabb;
  line-height: 30px;
  margin-top: 16px;
}
.checkContentItemLeftDescriptionItem {
  display: flex;
  align-items: center;
}
.checkContentItemLeftDescriptionItem .checkContentItemLeftDescriptionItemLabel {
  width: 170px;
  font-size: 14px;
  font-weight: 400;
  color: #202640;
  line-height: 30px;
  flex: none;
}
.checkContentItemLeftDescriptionItem .checkContentItemLeftDescriptionItemValue{
  font-size: 14px;
  color: #333;
}
/*右侧信息*/
.checkContent .checkContentItem .checkContentItemRight {
  margin-top: 16px;
}
.checkContentItemRight .checkContentItemRightResult {
  display: flex;
  align-items: baseline;
}
.checkContentItemRight .icon {
  font-size: 16px;
  margin-right: 6px;
  color: #3cb175;
}
.checkContentItemRight .icon_no {
  font-size: 16px;
  margin-right: 6px;
  color: red;
}
.checkContentItemRight .checkContentItemRightResultDescription {
  height: 30px;
  font-size: 14px;
  font-weight: 400;
  color: #666b80;
  line-height: 30px;
}
.checkContentItemRight .checkContentItemRightSignature {
  margin-top: 53px;
}
.checkContentItemRight .checkContentItemRightSignature img{
  width: 140px;
  display: block;
  height: auto;
  border: none;
}
.btn-group{
  text-align: center;
}
.return-btn{
  border: 1px solid black;
  background: #fff;
  color: black;
  position: relative;
  width: 160px;
  height: 42px;
  border-radius: 0;
  font-size: 16px;
  font-weight: 400;
  transition: all .3s;
  margin-right: 10px;
}
.upload-btn{
  margin-left: 10px;
  background-color: #1063f1;
  color: #fff;
  border: 1px solid #1063f1;
  position: relative;
  width: 160px;
  height: 42px;
  border-radius: 0;
  font-size: 16px;
  font-weight: 400;
  transition: all .3s;
}
</style>
